<template>
  <el-button
    class="voice-botton"
    type="primary"
    :class="{ 'is-recording': isRecording }"
    @click="handleVoice"
  >
    <ul class="aubox" v-if="isRecording">
      <li class="au1 auItem"></li>
      <li class="au2 auItem"></li>
      <li class="au3 auItem"></li>
      <li class="au4 auItem"></li>
      <li class="au5 auItem"></li>
      <li class="au6 auItem"></li>
      <li class="au7 auItem"></li>
    </ul>
    <template v-else>
      <Icon icon="svg-icon:voice" :size="20" />
    </template>
  </el-button>
</template>
<script setup>
import { ref } from 'vue'
import WebAudioSpeechRecognizer from '@/utils/Tencent-ASR/webaudiospeechrecognizer'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['start', 'update:modelValue', 'end'])

const messageVal = ref('')
const isRecording = ref(false)
const webAudioSpeechRecognizer = ref(null)

const stopRecording = () => {
  if (webAudioSpeechRecognizer.value) {
    webAudioSpeechRecognizer.value.stop()
    isRecording.value = false
  }
}

const startRecording = () => {
  const params = {
    secretid: 'AKIDXwBDk4A2jVCgy3xeASclkhQ1RkrshKm8',
    secretkey: 'EH7k9Rs5B6qPlvvkNoDQRGxa5OVXO3Wp',
    appid: 1309908179,
    engine_model_type: '16k_zh'
  }

  webAudioSpeechRecognizer.value = new WebAudioSpeechRecognizer(params)

  // 开始识别
  webAudioSpeechRecognizer.value.OnRecognitionStart = (res) => {
    console.log('开始识别', res)
    isRecording.value = true
    messageVal.value = ''
    emit('start', '')
  }

  // 一句话开始
  webAudioSpeechRecognizer.value.OnSentenceBegin = (res) => {
    console.log('一句话开始', res)
  }

  // 识别变化时
  webAudioSpeechRecognizer.value.OnRecognitionResultChange = (res) => {
    console.log('识别变化时', res)
    messageVal.value = res.result.voice_text_str
    emit('update:modelValue', messageVal.value)
  }

  // 一句话结束
  webAudioSpeechRecognizer.value.OnSentenceEnd = (res) => {
    console.log('一句话结束', res)
    // 不需要在这里重复添加文本
  }

  // 识别结束
  webAudioSpeechRecognizer.value.OnRecognitionComplete = (res) => {
    console.log('识别结束', res)
    isRecording.value = false
    emit('end', messageVal.value)
  }

  // 识别错误
  webAudioSpeechRecognizer.value.OnError = (res) => {
    console.log('识别失败', res)
    isRecording.value = false
    ElMessage.error('语音识别失败，请重试')
  }

  webAudioSpeechRecognizer.value.start()
}

const handleVoice = () => {
  if (isRecording.value) {
    stopRecording()
  } else {
    startRecording()
  }
}

defineExpose({
  doStart: startRecording,
  doStop: stopRecording
})
</script>
<style lang="less" scoped>
.voice-botton {
  // 临时把所有的语音按钮去掉
  display: none;
  width: 55px;
  .aubox {
    display: flex;
    justify-content: center;
    align-items: center; //重要属性，让hight翻转过来，往上延伸
  }
  .auItem {
    width: 2px;
    margin-right: 2px;
    margin-left: 2px;
    list-style: none;
    background: #fff;
    height: 20px;
  }
  .au1 {
    animation: audio 0.5s linear 0.1s infinite alternate;
  }
  .au2 {
    animation: audio 0.5s linear 0.2s infinite alternate;
  }
  .au3 {
    animation: audio 0.5s linear 0.5s infinite alternate;
  }
  // .au4 {
  // }
  .au5 {
    animation: audio 0.5s linear 0.2s infinite alternate;
  }
  .au6 {
    animation: audio 0.5s linear 0.3s infinite alternate;
  }
  .au7 {
    animation: audio 0.5s linear 0.1s infinite alternate;
  }
  @keyframes audio {
    from {
      height: 1px;
    }
    to {
      height: 20px;
    }
  }
}
</style>
